<template>
	<div class="m-tabct">
		<div class="tabctitem">
			<div class="m-hmsrch">
				<sea-searchwrap @messageData="getData"></sea-searchwrap>
				<div class="m-hotlist" v-show="Shidden==''">
					<h3 class="title">热门搜索</h3>
					<ul class="list">
						<sea-hotsearch :hotsearchList="item" v-for="item in hotsearchList.hots"></sea-hotsearch>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import seaSearchwrap from '@/components/threeSearch/Searchwrap.vue'
	import seaHotsearch from '@/components/threeSearch/Hotsearch.vue'
	import axios from 'axios'
	import api from '@/api'
	
	export default {
		components:{
			seaSearchwrap,
			seaHotsearch
		},
		data () {
			return {
				hotsearchList:'',
				Shidden:''
			}
		},
		mounted(){
			axios.get(api.hotsearchList,{
			params:{
				"token":""
				}
			})
			.then((res)=>{
	//			console.log(res)
				this.hotsearchList=res.data.result
				})
			.catch((err)=>{
	//			console.log(err)
			})
			},
			methods: {
		      	getData(val){
			        this.Shidden = val
			        console.log(this.Shidden)
			      }
		}
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	$fs:64px;
	html {
		font-size: $fs;
	}
	
	@function r($px) {
		@return $px/$fs*1rem;
	}
	.m-tabct{
		width: 100%;
		height: 100%;
		padding-top: r(208px);
			.tabctitem{
				width: 100%;
				height: 100%;
				.m-hotlist{
					padding: r(30px) r(20px) 0;
					.title {
					    font-size: r(24px);
					    font-weight: 400;
					    line-height: r(24px);
					    color: #666;
					}
					.list{
						font-size: 0;
						margin: r(20px) 0 r(14px);
					}
				}
			}
	}
</style>